<extend name="Public/base" />
<block name="title1">支付页面</block>
<block name="css"></block>
<block name="main1">


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>确认订单</title>
	<script src='__PUBLIC__/Js/jquery.js'></script>
	<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
	<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
	<script src="__PUBLIC__/Js/jqui/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="__PUBLIC__/Js/jqui/jquery-ui.min.css">
	<style>
		*{margin:0 auto;padding:0 auto;}
		a{cursor:pointer;}
		.title{width:100%;border:1px solid #DDDDDD;height:85px;}
		.title .logo{margin-left: 100px;}
		.title .status2{margin-left: 480px;}
		.tspan{margin-left: 100px;width:100%;}
		.taddr{width:1150px;margin:0 auto;border:1px solid #DDDDDD;}
		.showaddr{width:209px;height:150px;margin-top:10px;margin-left:60px;float:left;}
		.showmore{width:200px;border:2px solid #DDDDDD;height:120px;}
		.showmore .s1{display:inline-block;margin-top:5px;margin-left:10px;width:70px;height:20px;}
		.showmore .s2{display:inline-block;margin-left:10px;width:100px;height:20px;}
		.showmore .s3{margin-top:10px;}
		.showmore .s4{display:block;margin-left:5px;width:180px;height:50px;}
		.tspan1{margin-left: 32px;font-family:微软雅黑;font-size:20px;width:1100px;height:30px;font-weight:bold;display:inline-block;}
		.tspan2{margin-left:160px;display:none;}
		.tspan3{display:inline-block;width:100%;}
		.showmore:hover{border:2px solid red;}
		.modal-body input[type=text]{width:200px;border-radius:4px;height:30px;}
		.modal-body select{width:100px;border-radius:4px;height:30px;}
		.d{display:inline-block;}
		.d1{display:none;}
		.state1{color:#aaa;}      
		.state2{color:#000;}
		.state3{color:red;}    
		.state4{color:green;}
		.kongge{width:100%;height:20px;}
		.sureorder{width:1150px;margin:0 auto;border:1px solid #DDDDDD;}
		.jsu{width:1150px;background:#F5F5F5;height:90px;display:inline-block;}
		.jsu .all1{width:750px;height:63px;display:inline-block;}
		.jsu .all2{width:340px;height:80px;display:inline-block;}
		.all1 span{display:inline-block;margin-left:50px;}
		.all1 input[type=text]{width:300px;border-radius:4px;height:40px;}
		.all2 span{display:inline-block;height:50px;font-size:30px;color:red;margin-top:20px;margin-left:100px;font-family:微软雅黑}
		.oover{width:1150px;margin:0 auto;border:1px solid #DDDDDD;}
		.oover .tjo{width:300px;height:300px;margin-left:800px;}
		.tjo span{display:inline-block;width:100%;height:40px;margin-top:5px;color:gray;font-size:20px;}
		.tjo input[type=button]{width:100%;border-radius:4px;background:red;height:40px;color:white;border:0px;}
		.address{width:500px; height:100px;margin-left:0px;float:left;}
		.address .addrname{width:80px;height:50px;font-size:20px;display:inline-block;}
		.address .addrtel{width:200px;height:50px;font-size:20px;display:inline-block;}				
		.address .addraddr{width:490px;height:50px;font-size:20px;display:block;}
		#demo{border:1px solid black; width:500px;float:left;}
		#dialog-form{display: none;}
		#dialog-form input[type=text]{width:300px;border-radius:4px;height:40px;}
		.tedit{display:none;}
	</style>
</head>
<body>
<div id="dialog-form">
	<form class="v-edit">	
	    <input name="uid" type="hidden"><br><br>
		用&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;户 <input name="uname" type="text" value=""><br><span class="state1" id="pro1"></span><br>
	 	手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机 <input name="tel" type="text" value=""><br><span class="state1" id="pro2"></span><br>
	   	详细地址 <input name="addr" type="text" value=""><br><span class="state1" id="pro3"></span><br>
	</form> 
</div>
	<div class="title">
		<a href="<{:U('Home/Index/index')}>"><img src="__PUBLIC__/Photo/Home/Cart/logo.png" alt="logo" title='logo' class="logo"></a>
		<img src="__PUBLIC__/Photo/Home/Cart/cartstatus2.png" alt="status" title='status' class="status2">
	</div>
	<br>
	<span class="tspan">|&nbsp;核对订单信息</span>
	<div class="taddr">
		<span class="tspan1">收货人信息</span>
		<foreach name="adst" item='v'>
			<div class="showaddr" id="sd_<{$v.aid}>">
				<div class="showmore" id="<{$v.aid}>_srd">		
					<span class="s1"><{$v.aname}></span><span class="s2"><{$v.tel}></span>
					<hr class="s3">
					<span class="s4"><{$v.addr}></span>
				</div>
				<span class="tspan2">					
					<a class="tdel" data-uid="<{$v.aid}>">删除</a>	
				</span>
			</div>
		</foreach>
			<span class="tspan3">
				 <a id="modal-735093" href="#modal-container-735093" aria-hidden="true" data-backdrop="static" data-toggle="modal"><font size="5">+</font>添加新地址</a>
				<div class="modal fade" id="modal-container-735093" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								<h4 class="modal-title" id="myModalLabel" >
									地址添加
								</h4>
							</div>
							<div class="modal-body">
								<div>
									姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:<input type="text" name='aname' class="uname"><span class='state1'>请输入姓名</span><br><br>
									电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话:<input type="text" name='tel' class="tel"><span class='state1'>请输入电话号码</span>
								</div><br>
								<div id="d"></div>
									地&nbsp;&nbsp;址:省:<select name="pro" class="addrp">
										</select>
								<div id="dd" class="d1">
										市:<select name="city" class="addrc">
										</select>
								</div>
									
								<div id="ddd" class="d1">
										县:<select name="area" class="addra">
											</select>	
								</div>
								<span class="state1" id="ttt">请填写地址</span><br><br>
								<div>
									详细地址:<input type="text" name="addrm" class="addrm" ><span class='state1'>请输入详细地址</span>
								</div>	
							</div>
							<div class="modal-footer">
								 <input type="button" class="btn btn-default" data-dismiss="modal" value="关闭">
								 <input type="button" id="btns" class="btn btn-primary" data-dismiss="modal" value="保存">
							</div>
						</div>
					</div> 
				</div>
			</span>
	</div>
	<div class="kongge"></div>
	<div class="sureorder">
		<span class="tspan1">订单信息</span>
		<table class="table table-hover">
				<thead>
					<tr>
						<th>图示</th>
						<th>商品信息</th>
						<th>规格</th>
						<th>单价</th>
						<th>数量</th>
						<th>总价</th>
					</tr>
				</thead>				
				<tbody>
				<foreach name="list" item="v">
				<tr >
					<td><img src='__ROOT__/Uploads/prod/<{$v.goods_pic}>' width=80 height=80></td>
					<td><{$v.goods_name}></td>
					<td><{$v.color}><br><{$v.mobtype}><br><{$v.memory}></td>
					<td>&yen;<{$v.goods_price}></td>
					<td><{$v.num}></td>
					<td>&yen;<{$v['goods_price'] * $v['num']}></td>
				</tr>
				</foreach>	
				</tbody>							
			</table>
			<div class="jsu">
				<div class="all1">
					<span >备注:<input type="text" name='bz' placeholder="备注..."></span>								
				</div>
				<div class="all2">
					<span>总价格:&yen;<font class="allmoneys"><{$all}></font></span>
				</div>				
			</div>		
	</div>
	<div class="kongge"></div>
	<div class="oover"> 
		<div class="address">
			<span class="addrname"></span><span class="addrtel"></span>
			<span class="addraddr"></span><a class="tedit" data-uid="">修改</a>&nbsp;
		</div>
		<div class="tjo">
			<span></span>
			<span>总金额:&yen;<{$all}></span>
			<span>运费:&yen;0.00</span>
			<hr>
			<span class="ok3">应付:&yen;<{$all}></span>
			<input type="button" id="last_pay" value="支付">
		</div>
	</div>
	<script>
	$(function(){
		var ok1=false;
		var ok2=false;
		var ok3=false;
		var ok4=false;
		var ok5=false;
		var ok6=false;
		var ok7=false;
	//获取省
		$.get('<{:U("paied")}>',{parent_id:'1'},function(data){
			var html="<option value=''>省份/地区</option>";
			$(data).each(function(k,v){
				 html +='<option value="'+v.area_id+'">'+v.area_name+'</option>';
			}) ;
			$('[name="pro"]').html(html);
		},'json');

		//获取市
		$('[name="pro"]').change(function(){	
			$('[name="area"]').val("");
		    $("#dd").removeClass().addClass('d');
		    $("#ddd").removeClass().addClass('d1');
			var fid=$(this).val();	
			if($(this).val()==''){
				$("#dd").removeClass().addClass('d1');
				$("#ddd").removeClass().addClass('d1');
			}	
			$.get('<{:U("paied")}>',{parent_id:fid},function(data){	
				var html="<option value=''>市/县城</option>";
				$(data).each(function(k,v){
					 html +='<option value="'+v.area_id+'">'+v.area_name+'</option>';
				}) ;
				$('[name="city"]').html(html);
			},'json');	
		});
		//获取区域
		$('[name="city"]').change(function(){
			$('[name="area"]').val("");
			$("#ddd").removeClass().addClass('d');
			var fid=$(this).val();	
			if($(this).val()==''){
				$("#ddd").removeClass().addClass('d1');
			}
				$.get('<{:U("paied")}>',{parent_id:fid},function(data){	
					 html="<option value=''>区域/村庄</option>";
					$(data).each(function(k,v){
						 html +='<option value="'+v.area_id+'">'+v.area_name+'</option>';
					}) ;
					$('[name="area"]').html(html);
				},'json');
		});	

		//判断三级联动
		$('select').change(function(){
			var addrp=parseInt($('.addrp').val());
			var addrc=parseInt($('.addrc').val());
			var addra=parseInt($('.addra').val());
			if(!isNaN(addrp*addrc*addra)){
        		$('#ttt').text('输入成功').removeClass().addClass('state4');
        		ok4=true;
        	}else{
        		$('#ttt').text('地域必须选择').removeClass().addClass('state3');
        	}
		});
		//提交订单前验证
		 //验证手机
        $('.tel').focus(function(){
            $(this).next().text('请输入正确的手机格式').removeClass().addClass('state2');
        }).blur(function(){
            if($(this).val().search(/^1[3|4|5|7|8]\d{9}$/)==-1){
                $(this).next().text('请输入正确的手机格式').removeClass().addClass('state3');
            }else{                  
                $(this).next().text('输入成功').removeClass().addClass('state4');
                ok1=true;
            }  
        });
        //验证姓名
        $('.uname').focus(function(){
            $(this).next().text('用户名应该为3-12位之间').removeClass().addClass('state2');
        }).blur(function(){
            if($(this).val().length >= 2 && $(this).val().length <=3 && $(this).val()!=''){          
                  	$(this).next().text('输入成功').removeClass().addClass('state4');
            		ok2=true;
            }else{
                $(this).next().text('用户名应该为3-12位之间').removeClass().addClass('state3');
            }             
        });
        //验证详细地址
        $('.addrm').focus(function(){
            $(this).next().text('请填写具体门牌号').removeClass().addClass('state2');
        }).blur(function(){
        	var value=$.trim($(this).val());
            if(value!="" &&  value.length <=12){          
                  	$(this).next().text('输入成功').removeClass().addClass('state4');
            		ok3=true;
            }else{
                $(this).next().text('详细地址必须在1~12位之间').removeClass().addClass('state3');
            }             
        });       
        //添加按钮提交判断以及新建地址狂
        $('#btns').click(function(){
				if(ok1 && ok2 && ok3 && ok4){
	                //$('#frm').submit();
	                var name=$('.uname').val();
				    var tel=$('.tel').val();
				    var addr=$('.addrm').val();
				    var area=$(".addrp option:selected").text()+$(".addrc option:selected").text()+$(".addra option:selected").text();
				    $.post("<{:U('Home/Cart/addaddr')}>",{aname:name,tel:tel,area:area,addrs:addr},function(data){	    	
				      if(data.status){
						var append='<div class="showaddr" id="sd_'+data.last_id+'"><div class="showmore" id="'+data.last_id+'_srd"><span class="s1">'+name+'</span><span class="s2">'+tel+'</span><hr class="s3"><span class="s4">'+area+addr+'</span></div><span class="tspan2"><a class="tdel" data-uid="'+data.last_id+'">删除</a></span></div>';				        
				        $('.tspan3').before(append);				        
				      }
				    },'json');
	            }else{
	                alert("请填写完整信息");
	                return false;
	            }      
        });
        //清空输入框
      	$("#modal-container-735093").on("show.bs.modal", function() {
		  	$('.uname').val('');
		  	$('.uname').next().text('请输入姓名').removeClass().addClass('state1');
		  	ok1=false;
	    	$('.tel').val('');
	    	$('.tel').next().text('请输入电话号码').removeClass().addClass('state1');
		  	ok2=false;
	    	$('.addrm').val('');
	    	$('.addrm').next().text('请输入详细地址').removeClass().addClass('state1');
		  	ok3=false;
		  	$('#ttt').text('请输入地域').removeClass().addClass('state1');
        	ok4=false;
	    	$('.addrp option:first').prop('selected','selected');
	    	$('.addrc option:first').prop('selected','selected');
	    	$('.addra option:first').prop('selected','selected');
		});  
        //鼠标移动事件
        $(document).on('mouseover','.showaddr',function(){
        	$(this).children('.tspan2').css('display','block');
        })
        $(document).on('mouseout','.showaddr',function(){
        	$(this).children('.tspan2').css('display','none');
        })
        //地址获取事件
        $(document).on('click','.showmore',function(){
        	var uid=parseInt($(this).attr('id'));
        	$('.tedit').attr('data-uid',uid);
        	$('.tedit').css('display','block');
        	$('.showmore').css('border','2px solid #DDDDDD');
        	$(this).css('border','2px solid red');
        	var tn = $(this).children('.s1').text();
        	var tt = $(this).children('.s2').text();
        	var ta = $(this).children('.s4').text();
        	$('.addrname').text(tn);
        	$('.addrtel').text(tt);
        	$('.addraddr').text(ta);
        })
        //删除按钮确认事件
        $(document).on('click','.tdel',function(){
			var tuid = $(this).attr('data-uid');
			$( "<div>确认删除吗???</div>" ).dialog({
					title:'删除',
					modal: true,
					buttons: {
				        确定: function(){				       
				          	$.post('<{:U("tdel")}>',{tuid:tuid},function(data){
								if(data.status){				
									$('#sd_'+tuid).remove();			
								}else{
									alert('删除失败');
								}			
							},'json');
				          	$(this).dialog( "close" );
				        },
				        取消: function(){
				        	$(this).dialog( "close" );
				        }
					}
				});
		});
		//修改按钮事件
		$(document).on('click','.tedit',function(){
			var tuid = $(this).attr('data-uid');
			var tn=$('.addrname').text()
			var tt=$('.addrtel').text()
			var ta=$('.addraddr').text()
			$('.v-edit [name="uname"]').val(tn);
			$('.v-edit [name="tel"]').val(tt);
			$('.v-edit [name="addr"]').val(ta);
			//手机验证
			$('.v-edit [name="tel"]').focus(function(){
            $('#pro2').text('请输入正确的手机格式').removeClass().addClass('state2');
	        }).blur(function(){
	            if($(this).val().search(/^1[3|4|5|7|8]\d{9}$/)==-1){
	                $('#pro2').text('请输入正确的手机格式').removeClass().addClass('state3');
	            }else{                  
	                $('#pro2').text('输入成功').removeClass().addClass('state4');
	                ok5=true;
	            }  
	        });
	        //验证姓名
	        $('.v-edit [name="uname"]').focus(function(){
	            $('#pro1').text('用户名应该为2~3位之间').removeClass().addClass('state2');
	        }).blur(function(){
	            if($(this).val().length >= 2 && $(this).val().length <=3 && $(this).val()!=''){          
	                  	$('#pro1').text('输入成功').removeClass().addClass('state4');
	            		ok6=true;
	            }else{
	                $('#pro1').text('用户名应该为2~3位之间').removeClass().addClass('state3');
	            }             
	        });
	        //验证详细地址
	        $('.v-edit [name="addr"]').focus(function(){
	            $('#pro3').text('请填写具体门牌号').removeClass().addClass('state2');
	        }).blur(function(){
	        	var value=$.trim($(this).val());
	            if(value!="" &&  value.length <=20){          
	                  	$('#pro3').text('输入成功').removeClass().addClass('state4');
	            		ok7=true;
	            }else{
	                $('#pro3').text('详细地址必须在1~20位之间').removeClass().addClass('state3');
	            }             
	        });       
		$( "#dialog-form" ).dialog({
			title:'修改',
			height: 400,
			width: 400,
			modal: true,
			buttons: {
				修改: function(){
						var uname = $('.v-edit [name="uname"]').val();
						var tel = $('.v-edit [name="tel"]').val();
						var addr =	$('.v-edit [name="addr"]').val();
						if(ok5 && ok6 && ok7){						
							$.post('<{:U("editaddr")}>',{aid:tuid,aname:uname,addr:addr,tel:tel},function(data){			
								if(data.status){
									$('#'+tuid+'_srd').children('.s4').text(addr);
									$('#'+tuid+'_srd').children('.s2').text(tel);
									$('#'+tuid+'_srd').children('.s1').text(uname);
									$('.addrname').text(uname);
									$('.addrtel').text(tel);
									$('.addraddr').text(addr);
								}else{
									alert('修改失败!');
								}										
							},'json');
					    	$(this).dialog( "close" );
					    }else{
					    	alert('请填写完整信息');
					    }
				},
				取消: function(){
					$(this).dialog( "close" );
				}
			}
		});
	});
	//生成订单按钮
	$('#last_pay').click(function(){
    	var addr = $('.addraddr').text();
		var oid  = $('') 	  	
		if(addr!=''){
			var addr_id=$('.tedit').attr('data-uid');			
			$.post("<{:U('Home/Cart/refer')}>",{addr_id:addr_id},function(data){
				if(data.status){
					console.log(data.oid);
					location.href="<{:U('Home/Cart/over')}>?oid="+data.oid;
				}
			})
			;
		}else{
			alert('请先选择地址!');
		}	
	})




})
	</script>
</body>
</html>
</block>